<template>
  <div>
    <!-- 3. 使用组件 -->
    <!-- 以标签的形式去使用组件就可以， 标签里面放着组件名称 -->
    <!-- 规定： 在Vue 上注册的组件， 我们就可以在template去使用标签的形式 -->
    <!-- HTML标签  单标签和双标签 -->
    <!-- 单标签： <标签名称 /> -->
    <!-- 双标签： <标签名称></标签名称> -->
    <!-- 不可以将已经存在的标签作为组件的名称 -->
    <Counter :count="count" @b="c"></Counter>


    <button @click="c">父组件+1</button>
  </div>
</template>

<script>
// 1 引入组件
// 我们要用组件， 就需要引入
// 语法规定  需要这么写
// ES module
// 建议 引入的组件和原名字保持一直 d
// 组件名称 小驼峰  或者  大驼峰
// document.querySelector()

import Counter from "./components/Counter.vue";
export default {
  //2. 注册组件
  // 在实例身上有一个属性， components 组件
  // 当你使用组件的时候， 你必须需要将这个组件在components进行注册，
  // 才可以使用。
  components: {
    Counter
  },
  data() {
    return {
      count: 1
    }
  },
  methods: {
    c() {
      this.count++
    }
  }
};
</script>